<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col fun-relative group">
			<image class="section_3" src="@/static/account/ustd_logo.png" v-if='rechargeInfo.payCurrency == "USDT"' />
			<image class="section_3" src="@/static/account/trc_logo.png" v-else/>
			<view class="fun-flex-col fun-self-stretch section_4">
				<view class="fun-flex-row fun-justify-between fun-items-center group_2">
					<text class="font">Dollar Amount</text>
					<text class="font text_3">${{rechargeInfo.priceAmount}}</text>
				</view>
				<view class="divider"></view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_3">
					<text class="font_2 text_5">Transaction Fee</text>
					<text class="font_2 text_4">${{rechargeInfo.serviceCharge}}</text>
				</view>
				<view class="divider"></view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_4">
					<text class="font_3">Total Amount</text>
					<text class="font_3 text_6">{{rechargeInfo.payAmount}} {{rechargeInfo.payCurrency}}</text>
				</view>
				<view class="divider"></view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_5">
					<text class="font_3">Protocal</text>
					<text class="font_3 text_7">{{rechargeInfo.protocol}}</text>
				</view>
				<view class="divider"></view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_6">
					<text class="font_2 text_8">Oder No.</text>
					<text class="font_3 text_9">{{rechargeInfo.orderNo}}</text>
				</view>
			</view>
			
		</view>
		
		<view class="fun-mt-20 fun-flex-col group_7">
			<text class="fun-self-center font text_10">Address</text>
			<view class="fun-mt-12 fun-flex-col fun-self-stretch">
				<view class="fun-self-start group_8">
					<text class="font_4">Please be sure to enter the</text>
					<text class="font_2 exact">exact amount</text>
					<text class="font_4">
						of the above crypto currency transfer. Any transaction failure due to inaccurate amounts or currency type will be at your own risk.
					</text>
				</view>
				
				<view class="fun-mt-12 fun-flex-col group_9">
					<view class="fun-flex-row fun-items-center fun-justify-between section_5">
						<text class="font_2 text_12">{{rechargeInfo.address}}</text>
						<image class="fun-ml-2 image_4" src="@/static/account/copy.png" @click="copy" />
					</view>
					
					<view class="fun-mt-12 fun-flex-col fun-justify-start fun-items-center fun-self-center group_10">
						<!-- <view class="fun-flex-col section_6"></view> -->
						<uqrcode ref="qrcode" v-show='rechargeInfo.address' canvas-id="qrcode" :value="rechargeInfo.address" :size="140">
						</uqrcode>
					</view>
					<text class="fun-mt-12 font_2 text_13">
						This recharge QR code or address is valid within 30 minutes, please do not delay or repeat payment.
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {rechargeOrderInfo} from "@/api/account.js"
	export default {
		data() {
			return {
				queryDate:{
					orderId:"",
					timeZone:8
				},
				rechargeInfo:{}
			};
		},
		
		onLoad(option) {
			this.queryDate.timeZone = this.UTILS.getTimeZone() || 8;
			this.queryDate.orderId = this.UTILS.stringToNum(decodeURIComponent(option.orderId)) || null;
			this.getRechargeOrderInfo()
		},

		methods: {
			getRechargeOrderInfo(){
				rechargeOrderInfo(this.queryDate).then(res => {
					if(res.code == 0){
						this.rechargeInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			copy(){
				uni.setClipboardData({
					data: this.rechargeInfo.address,
					success: ()=> {
						this.UTILS.logStr("Copy success")
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}
	.ml-37 {
		margin-left: 74rpx;
	}
	.ml-77 {
		margin-left: 154rpx;
	}
	.page {
		padding-bottom: 100rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.group {
			padding: 32rpx 32rpx 0 32rpx;
			.section_3 {
				border-radius: 160rpx;
				width: 140rpx;
				height: 140rpx;
				margin: 0 auto;
			}

			.section_4 {
				margin-top: 60rpx;
				padding: 0 28rpx;
				background-color: #f6f6f6;
				border-radius: 20rpx;
				.group_2 {
					padding-top:24rpx;
					padding-bottom: 12rpx;
				}

				.divider {
					background-color: #b0b1bf24;
					height: 2rpx;
				}

				.group_3 {
					padding: 32rpx 0 24rpx;
					.text_4 {
						margin-right: 16rpx;
					}
				}

				.group_4 {
					padding: 32rpx 0 20rpx;

					.text_6 {
						font-weight: 700;
					}
				}

				.group_5 {
					padding: 32rpx 4rpx 24rpx;

					.text_7 {
						margin-right: 12rpx;
					}
				}

				.font_3 {
					font-size: 32rpx;
					font-family: SF Pro Display;
					color: #000000;
				}

				.group_6 {
					padding: 36rpx 0 24rpx;
				}
			}
		}

		.group_7 {
			padding: 0 16px;
			.group_8 {
				text-align: center;
				.font_4 {
					font-size: 28rpx;
					font-family: SF Pro Display;
					color: #777e90;
				}
				.exact{
					color: #000;
					margin: 0 8rpx;
				}
			}

			.group_9 {
				.section_5 {
					margin: 0 16rpx;
					padding: 8rpx 28rpx;
					background-color: #f4f5f6;
					border-radius: 8rpx;
					border: solid 2rpx #e5e8eb;
					.text_12 {
						flex: 0.98;
						white-space: nowrap; /* 确保文本在一行内显示 */
						overflow: hidden; /* 超出容器部分隐藏 */
						text-overflow: ellipsis;
						color: #22262e;
					}
				}

				.group_10 {
					padding:32rpx;
					border-radius: 16rpx;
					border: dotted 4rpx #1a7b99;
					.section_6 {
						padding: 32rpx;
						background-color: #cdb4db;
						border-radius: 16rpx;
						overflow: hidden;
						.image_5 {
							width: 20rpx;
							height: 16rpx;
						}
					}
				}

				.text_13 {
					color: #7f7f7f;
					text-align: center;
					word-break: break-all;
				}
			}
		}
		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			color: #22262e;
		}

		.font_2 {
			font-size: 28rpx;
			font-family: SF Pro Display;
			color: #000000;
		}

		.image_4 {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>